{{template Elements/header_content}}
    <div class="row">
      {{loop $storefronts $k $item}}
      	<div class="col-xs-12">
      		<a href="{{$this->Html->url('/wx_storefronts/view/'.$item['WxStorefront']['id'])}}">
      		<div class="wx-cover-item">
      			{{if $k < 4}}
      				<img src="{{$this->Html->image($item['WxStorefront']['coverimg'],array('onlyurl'=>true))}}">
      			{{else}}
	       			<img class="lazy"  src="{{$this->Html->image('/img/grey.gif',array('onlyurl'=>true))}}" data-src="{{$this->Html->image($item['WxStorefront']['coverimg'],array('onlyurl'=>true))}}">
	       		{{/if}}
	       		<h4>{{$item['WxStorefront']['name']}} <i class="fa fa-angle-right pull-right"></i></h4>
      		</div>
      		</a>
      	</div>
 		{{/loop}}
   	</div>
<script>
$(function(){	
	/*$(window).resize(function(){
		var size = $('.wx-cover-item').size(); 
		if(size >=2 && size <= 4) {
			var height = $(window).height() - 32 - 6*size; //each has six border.
			$('.wx-cover-item .cover').height( height/size );
		}		
	}).trigger('resize');*/
})
</script>